<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>一次性纸杯展开图计算</title>
    <link rel="shortcut icon" href="papercup.png" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">
    <style>
        .box {
            margin: 0 auto
        }
    </style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
<script src="jquery-3.5.1.min.js"></script>
<div class="box">
    <div>
            <h1 class="box" style="width: 25%">一次性纸杯展开图计算</h1>
        <div class="box" style="width: 25%">
            <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                 x="0px" y="0px"
                 viewBox="0 0 880 494.8" style="enable-background:new 0 0 880 494.8;" xml:space="preserve">
<style type="text/css">
	.st0 {
        fill: #FFFFFF;
        stroke: #000000;
        stroke-miterlimit: 10;
    }

    .st1 {
        fill: #FFFFFF;
        stroke: #000000;
        stroke-miterlimit: 10;
        stroke-dasharray: 4, 4;
    }

    .st2 {
        fill: none;
        stroke: #000000;
        stroke-miterlimit: 10;
    }

    .st3 {
        fill: none;
        stroke: #000000;
        stroke-width: 2;
        stroke-miterlimit: 10;
    }

    .st4 {
        stroke: #000000;
        stroke-miterlimit: 10;
    }

    .st5 {
        font-family: 'AdobeSongStd-Light-GBpc-EUC-H';
    }

    .st6 {
        font-size: 70px;
    }

    .st7 {
        fill: none;
        stroke: #000000;
        stroke-miterlimit: 10;
        stroke-dasharray: 3.1017, 3.1017;
    }

    .st8 {
        fill: none;
        stroke: #000000;
        stroke-miterlimit: 10;
        stroke-dasharray: 12.4068, 3.1017, 3.1017, 3.1017;
    }

    .st9 {
        fill: none;
        stroke: #000000;
        stroke-miterlimit: 10;
        stroke-dasharray: 12, 3, 3, 3;
    }

    .st10 {
        stroke: #000000;
    }

    .st11 {
        fill: none;
        stroke: #000000;
        stroke-miterlimit: 10;
        stroke-dasharray: 12.3616, 12.3616;
    }
</style>
                <ellipse class="st0" cx="237.5" cy="152.5" rx="124" ry="36"/>
                <path class="st0" d="M334.5,381.5c0,15.6-43.4,28.2-97,28.2s-97-12.6-97-28.2"/>
                <path class="st1" d="M140.5,381.5c0-15.6,43.4-28.2,97-28.2s97,12.6,97,28.2"/>
                <line class="st2" x1="113.5" y1="152.5" x2="140.5" y2="381.5"/>
                <line class="st2" x1="361.5" y1="152.5" x2="334.5" y2="381.5"/>
                <g>
	<g>
		<line class="st3" x1="372.4" y1="170.1" x2="349.6" y2="363.9"/>
        <g>
			<polygon points="366.2,173.4 374.5,152.5 377.7,174.7 			"/>
		</g>
        <g>
			<polygon points="344.3,359.3 347.5,381.5 355.8,360.6 			"/>
		</g>
	</g>
</g>
                <path class="st2" d="M854.6,174.5L795.8,244c-38.7-32.7-88.7-52.5-143.3-52.5S547.8,211.2,509.2,244l-58.8-69.5
	c54.5-46.2,125.1-74,202.1-74S800.1,128.3,854.6,174.5z"/>
                <g>
	<g>
		<line class="st3" x1="520.9" y1="148.9" x2="652.5" y2="413.5"/>
        <g>
			<polygon points="517.5,155 513,133 527.9,149.8 			"/>
		</g>
	</g>
</g>
                <g>
	<g>
		<line class="st3" x1="752.3" y1="236.4" x2="652.5" y2="413.5"/>
        <g>
			<polygon points="745.3,237 761,221 755.4,242.7 			"/>
		</g>
	</g>
</g>
                <text transform="matrix(0.583 0 0 0.583 592 284.3101)" class="st4 st5 st6">r1</text>
                <text transform="matrix(0.583 0 0 0.583 633 355.3101)" class="st4 st5 st6">θ</text>
                <text transform="matrix(0.583 0 0 0.583 81 276.3101)" class="st4 st5 st6">h</text>
                <text transform="matrix(0.583 0 0 0.583 219 345.3101)" class="st4 st5 st6">d2</text>
                <text transform="matrix(0.583 0 0 0.583 219 105.3101)" class="st4 st5 st6">d1</text>
                <text transform="matrix(0.583 0 0 0.583 692 284.3101)" class="st4 st5 st6">r2</text>
                <g>
	<g>
		<line class="st2" x1="139.5" y1="381" x2="145.5" y2="381"/>
        <line class="st7" x1="148.6" y1="381" x2="153.3" y2="381"/>
        <line class="st8" x1="154.8" y1="381" x2="326.9" y2="381"/>
        <line class="st2" x1="328.5" y1="381" x2="334.5" y2="381"/>
	</g>
</g>
                <line class="st9" x1="361.5" y1="150.5" x2="113.5" y2="150.5"/>
                <g>
	<g>
		<line class="st3" x1="104.5" y1="168.2" x2="104.5" y2="362.8"/>
        <g>
			<polygon points="98.7,172.2 104.5,150.5 110.3,172.2 			"/>
		</g>
        <g>
			<polygon points="98.7,358.8 104.5,380.5 110.3,358.8 			"/>
		</g>
	</g>
</g>
                <g>
	<line class="st3" x1="362" y1="151" x2="385" y2="154"/>
                    <line class="st3" x1="334" y1="382" x2="357" y2="385"/>
</g>
                <line class="st3" x1="435" y1="187" x2="450" y2="175"/>
                <line class="st3" x1="494" y1="256" x2="509" y2="244"/>
                <text transform="matrix(0.583 0 0 0.583 368.5 281.8101)" class="st10 st5 st6">l</text>
                <text transform="matrix(0.583 0 0 0.583 450.5 247.8101)" class="st10 st5 st6">l</text>
                <line class="st3" x1="139" y1="381" x2="101" y2="381"/>
                <line class="st3" x1="114" y1="150" x2="100" y2="150"/>
                <line class="st3" x1="140" y1="381" x2="140" y2="343"/>
                <line class="st3" x1="114" y1="101" x2="114" y2="153"/>
                <line class="st3" x1="362" y1="101" x2="362" y2="153"/>
                <line class="st3" x1="335" y1="382.5" x2="335" y2="344.5"/>
                <g>
	<g>
		<line class="st3" x1="131.7" y1="112" x2="344.3" y2="112"/>
        <g>
			<polygon points="135.7,117.8 114,112 135.7,106.2 			"/>
		</g>
        <g>
			<polygon points="340.3,117.8 362,112 340.3,106.2 			"/>
		</g>
	</g>
</g>
                <g>
	<g>
		<line class="st3" x1="157.7" y1="350" x2="317.3" y2="350"/>
        <g>
			<polygon points="161.7,355.8 140,350 161.7,344.2 			"/>
		</g>
        <g>
			<polygon points="313.3,355.8 335,350 313.3,344.2 			"/>
		</g>
	</g>
</g>
                <g>
	<g>
		<line class="st3" x1="451.5" y1="196.5" x2="487.5" y2="238.5"/>
        <g>
			<polygon points="449.7,203.3 440,183 458.5,195.7 			"/>
		</g>
        <g>
			<polygon points="480.5,239.3 499,252 489.3,231.7 			"/>
		</g>
	</g>
</g>
                <g>
	<g>
		<line class="st2" x1="509.5" y1="243.5" x2="513.4" y2="248.1"/>
        <line class="st11" x1="521.3" y1="257.6" x2="644.7" y2="404.2"/>
        <line class="st2" x1="648.6" y1="408.9" x2="652.5" y2="413.5"/>
	</g>
</g>
                <g>
	<g>
		<line class="st2" x1="795.5" y1="243.5" x2="791.6" y2="248.1"/>
        <line class="st11" x1="783.7" y1="257.6" x2="660.3" y2="404.2"/>
        <line class="st2" x1="656.4" y1="408.9" x2="652.5" y2="413.5"/>
	</g>
</g>
                <path class="st3" d="M617.9,372.4c9.2-7.7,21.1-12.4,34.1-12.4c13.2,0,25.4,4.9,34.7,12.9"/>
</svg>
        </div>
        <table class="box">
            <tr>
                <td>纸杯高度(h):</td>
                <td><input id="h" placeholder=""></td>
            </tr>
            <tr>
                <td>杯口直径(d1):</td>
                <td><input id="d1" placeholder=""></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>杯底直径(d2):</td>
                <td><input id="d2" placeholder=""></td>
            </tr>
            <tr>
                <td>
                    <button id="submit">计算</button>
                </td>
            </tr>
            <tr>
                <td>外圆弧半径(r1):</td>
                <td><input id="r1" readonly="readonly" value="空"/></td>
            </tr>
            <tr>
                <td>内圆弧半径(r2):</td>
                <td><input id="r2" readonly="readonly" value="空"/></td>
            </tr>
            <tr>
                <td>母线长度(l):</td>
                <td><input id="l" readonly="readonly" value="空"/></td>
            </tr>
            <tr>
                <td>圆心角-弧度(θ):</td>
                <td><input id="xita" readonly="readonly" value="空"/></td>
            </tr>
            <tr>
                <td>圆心角-角度(φ):</td>
                <td><input id="fai" readonly="readonly" value="空"/></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>

    </div>

    <div class="box"  style="width: 20%">
        <div class="box footer-inner">


            <div class="copyright">
                &copy;
                <span itemprop="copyrightYear">2021</span>
                <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
                <span class="author" itemprop="copyrightHolder">zhaomifan</span>
            </div>
            <div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
                <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
            </div>

        </div>
    </div>
</div>
<script type="text/javascript">
    $("#submit").on('click', function () {
        var h = parseFloat($("#h").val());
        var d1 = parseFloat($("#d1").val());
        var d2 = parseFloat($("#d2").val());
        console.log(Math.pow((d1 - d2) / 2, 2))
        var l = Math.sqrt(Math.pow((d1 - d2) / 2, 2) + Math.pow(h, 2));
        var xita = Math.PI * (d1 - d2) / l;
        var fai = xita / Math.PI * 180;
        var r1 = Math.PI * d1 / xita;
        var r2 = r1 - l;
        console.log(r1, r2, fai)
        $("#r1").val(fixTail(r1));
        $("#r2").val(fixTail(r2));
        $("#l").val(fixTail(l));
        $("#xita").val(fixTail(xita));
        $("#fai").val(fixTail(fai) + '°');
    })

    function fixTail(num) {
        return Math.round(num * 100) / 100
    }

</script>
</body>

</html>
